<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
	<head>
		<title>登录网页源码</title>

		<meta name="keywords" content="登录网页源码" />

		<meta name="description" content="最全的登录网页源码下载网站http://cn.inspinia.cn" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="/css/style.css" rel="stylesheet" type="text/css" />
		<script src="/js/jquery.min.js"></script>
		<script src="/js/skycons.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<h1>Multi Column Widget</h1>
		<div id="loginDiv" class="main-agileits">
			<div class="sign-in-wthree">
				<div class="sign-in-top-agileinfo">
					<h2>Sign In</h2>
					<p>Your info is safe here</p>
				</div>
				<div class="sign-in-bottom-agileinfo">
					<form action="javascript:void(0);" method="post">
						<h3>User Name</h3>
						<input type="text" v-model="user.userName" required="required" />
						<h3>Password</h3>
						<input type="password" v-model="user.password" required=" " />
						<input
							class="form-control input-val"
							type="text"
							v-model="inputNum"
							placeholder="请输入验证码（不区分大小写）"
							style="float: left; width: 55%; margin-bottom: 0px"
						/>
						<canvas id="canvas" @click="draw()" style="width: 95px; height: 36px"></canvas>
						<input type="submit" @click="login()" value="Sign In" />
						<p>Forgot Password?</p>
						<a href="#">Click Here</a>
					</form>
				</div>
			</div>
		</div>
		<div class="footer-agileits-w3layouts">
			<p class="agileinfo">
				&copy; 2016 Multi Column Widget . All Rights Reserved | Design by
				<a href="https://shop585798004.taobao.com/" target="_blank">前端ui</a>
			</p>
		</div>

		<script>
			var loginVue = new Vue({
				el: "#loginDiv",
				data: {
					user: {
						userName: "",
						password: "",
					},
					showNum: [], // 动态验证码字符数组
					inputNum: "", // 输入动态验证码
				},
				methods: {
					login: function () {
						if (this.user.userName == "" || this.user.password == "") {
							alert("请输入用户名和密码。");
							return;
						}

						var showNumStr = this.showNum.join("");
						if (this.inputNum == "") {
							alert("请输入验证码。");
							return;
						} else if (this.inputNum != showNumStr) {
							alert("验证码输入错误。");
							return;
						}

						var self = this;
						$.ajax({
							url: "/api/login",
							type: "post",
							contentType: "application/json",
							data: JSON.stringify(self.user),
							success: function (rs) {
								if (rs.status == 200) {
									location.href = "/index";
								} else {
									alert(rs.message);
								}
							},
							error: function (rs) {
								console.log(rs);
							},
						});
					},
					// 画动态验证码
					draw: function () {
						var canvas_width = $("#canvas").width();
						var canvas_height = $("#canvas").height();
						var canvas = document.getElementById("canvas");
						var context = canvas.getContext("2d");
						canvas.width = canvas_width;
						canvas.height = canvas_height;
						var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
						var aCode = sCode.split(",");
						var aLength = aCode.length;

						for (var i = 0; i <= 3; i++) {
							var j = Math.floor(Math.random() * aLength);
							var deg = (Math.random() * 30 * Math.PI) / 180;
							var txt = aCode[j];
							this.showNum[i] = txt.toLowerCase();
							var x = 10 + i * 20;
							var y = 20 + Math.random() * 8;
							context.font = "bold 23px 微软雅黑";

							context.translate(x, y);
							context.rotate(deg);

							context.fillStyle = this.randomColor();
							context.fillText(txt, 0, 0);

							context.rotate(-deg);
							context.translate(-x, -y);
						}
						for (var i = 0; i <= 5; i++) {
							context.strokeStyle = this.randomColor();
							context.beginPath();
							context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
							context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
							context.stroke();
						}
						for (var i = 0; i <= 30; i++) {
							context.strokeStyle = this.randomColor();
							context.beginPath();
							var x = Math.random() * canvas_width;
							var y = Math.random() * canvas_height;
							context.moveTo(x, y);
							context.lineTo(x + 1, y + 1);
							context.stroke();
						}
					},
					// 随机颜色
					randomColor: function () {
						var r = Math.floor(Math.random() * 256);
						var g = Math.floor(Math.random() * 256);
						var b = Math.floor(Math.random() * 256);
						return "rgb(" + r + "," + g + "," + b + ")";
					},
				},
				mounted() {
					this.draw();
				},
			});
		</script>
	</body>
</html>
